<template>
    <div>
        <!-- 标题-->
        <div class="header-container">
            <a-page-header title="审核注册" />
        </div>

        <!-- 两个按钮-->
        <div class="query-container">
            <a-button type="primary" :disabled="!hasSelected" @click="onBatchOperation(2)">批量通过</a-button>
            <span class="seize"/>
            <a-button type="danger" :disabled="!hasSelected" @click="onBatchOperation(3)">批量驳回</a-button>
            <span class="seize"/>
            <span v-if="hasSelected">
                {{ `已选中 ${selectedRowKeys.length} 项` }}
            </span>
        </div>

        <!-- 表格-->
        <div class="table-container">
            <a-table
                    :row-selection="rowSelection"
                    :columns="columns"
                    :data-source="dataResource"
                    :pagination="pagination"
            >
                <template slot="operation" slot-scope="text,record">
                    <!-- 点击通过弹出的确认框-->
                    <a-popconfirm
                            v-if="dataResource.length"
                            title="你确定要通过这个申请吗?"
                            @confirm="() => onOperation(record.key,2)"
                            cancelText='取消'
                            okText="确定"
                            :disabled="onDisabled(record)"
                            placement="bottom"
                    >
                        <a-icon slot="icon" type="question-circle-o" style="color: red"/>
                        <a href="javascript:;" :style="onColor(record,'通过')">通过</a>
                    </a-popconfirm>
                    <span class="seize"/>

                    <!-- 点击驳回弹出的确认框-->
                    <a-popconfirm
                            v-if="dataResource.length"
                            title="你确定要驳回这个申请吗?"
                            @confirm="() => onOperation(record.key,3)"
                            cancelText='取消'
                            okText="确定"
                            :disabled="onDisabled(record)"
                            placement="bottom"
                    >
                        <a-icon slot="icon" type="question-circle-o" style="color: red"/>
                        <a href="javascript:;" :style="onColor(record,'驳回')">驳回</a>
                    </a-popconfirm>
                    <span class="seize"/>
                    <a href="javascript:;" @click="onCheck(record.teacherId)">查看</a>
                </template>
            </a-table>
            <!-- 点击查看弹出的对话框-->
            <a-modal
                    title="老师注册信息"
                    :visible="visible"
                    :destroyOnClose="true"
                    @ok="handleOk"
                    @cancel="handleCancel"
            >
                <div>
                    <a-row :gutter="['24','24']">
                        <a-col :span="12">
                            工号：{{teacherInfo.account}}
                        </a-col>
                        <a-col :span="12">
                            密码：{{teacherInfo.password}}
                        </a-col>
                    </a-row>
                    <a-row :gutter="['24','24']">
                        <a-col :span="12">
                            姓名：{{teacherInfo.name}}
                        </a-col>
                        <a-col :span="12">
                            邮箱：{{teacherInfo.e_mail}}
                        </a-col>
                    </a-row>
                    <a-row :gutter="['24','24']">
                        <a-col :span="12">
                            学院：{{teacherInfo.college}}
                        </a-col>
                        <a-col :span="12">
                            电话号码：{{teacherInfo.phone}}
                        </a-col>
                    </a-row>
                </div>
            </a-modal>
        </div>
    </div>
</template>

<script>
    //列名数组
    const columns = [
        {
            title: '审核内容',
            dataIndex: 'content',
            align: 'center',
        },
        {
            title: '审核结果',
            dataIndex: 'result',
            align: 'center',

        },
        {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
            align: 'center',
        }
    ];

    import { mapState } from 'vuex'
    export default {
        name: "AuditRegister",
        data(){
            return{
                //表格数据源
                dataResource:[],
                columns,
                //表格分页数据源和事件监听
                pagination: {
                    //current和pageSize负责记录操作时在第几页和显示几条数据
                    current:1,
                    pageSize:10,
                    //可选择的pageSize
                    pageSizeOptions: ['5', '10', '15', '20'],
                    //数据总数
                    total:0,
                    //默认的pageSize
                    defaultPageSize:10,
                    //数据总数如何显示
                    showTotal: total=>'总共'+total+'条审核信息',
                    //是否在分页中显示pageSize能否改变的选项
                    showSizeChanger: true,
                    //current 和 pageSize 改变时触发的事件
                    onShowSizeChange: (current, pageSize) => this.onChangePage(current, pageSize),
                    onChange: (page,pageSize)=> this.onChangePage(page,pageSize)
                },
                //选中多项的数据源
                selectedRowKeys: [],
                //是否加载
                loading: true,
                //默认分页数据
                defaultCurrentPage: 1,
                defaultRows: 10,
                //弹出框是否可见
                visible:false,
              teacherInfo:{
                account:'',
                password:'',
                name:'',
                e_mail:'',
                college:'',
                phone:''
              }
            }
        },
        computed: {
            // 提取store文件夹auditRegister.js中的state,赋值给计算属性 auditRegisterState
            //提取store文件夹access.js中的state,赋值给计算属性 accessState
            ...mapState({
                auditRegisterState: 'auditRegister',
                accessState: 'access'
            }),

            //是否选中多项
            hasSelected(){
                return this.selectedRowKeys.length>0;
            },

            //选中多项时的数据源和事件监听
            rowSelection(){
                return {
                    selectedRowKeys: this.selectedRowKeys,
                    onChange: selectedRowKeys=>{
                        this.selectedRowKeys = selectedRowKeys;
                    },
                    //所有已通过和已驳回的项都禁止选中
                    getCheckboxProps: record => ({
                        props: {
                            disabled: !record.result.startsWith('未审核'),
                        },
                }),
                }
            }
        },
        mounted() {
            //页面刚加载时调用一次接口
            this.$store.dispatch('auditRegister/auditRegisterGet',{
                //toekn 和 colllegeId 从 accessState中获取
                token: this.accessState.token,
                collegeId: this.accessState.collegeId,
                rows: this.defaultRows,
                currentPage: this.defaultCurrentPage
            }).then(() => {
                    //调用成功，结果返回
                    this.dataResource=this.auditRegisterState.auditRegisterInfo;
                    this.pagination.total=this.auditRegisterState.total;
            }).catch((err) => {
                this.$message.error(err.msg)
            })
        },
        methods: {
            //查看某项审核信息的事件监听处理
            onCheck(teacherId){
                //调用接口
                this.$store.dispatch('auditRegister/getTeacherInfo',{
                    token: this.accessState.token,
                    teacherId: teacherId
                }).then( () => {
                    //获取成功
                  this.teacherInfo=this.auditRegisterState.teacherInfo
                    this.visible=true;
                }).catch((err) => {
                    this.$message.error(err.msg)
                })

            },
            //通过和驳回的颜色样式，根据是否未审核而定
            onColor(record,operation){
                //如果是已通过或者已驳回，则为灰色
                if(!record.result.startsWith('未审核')){
                    return {
                        color: 'grey'
                    }
                }else {
                    //如果是为审核且是驳回按钮，则为红色
                    //如果是为审核且是通过按钮，则默认为蓝色
                    if(operation.startsWith('驳回')){
                        return {
                            color: 'red'
                        }
                    }
                }
            },
            //点击通过和驳回是否弹出确认框，根据是否未审核而定
            onDisabled(record){
                return !record.result.startsWith('未审核');
            },
            //通过或驳回某一项审核
            onOperation(auditRegisterId,operation){
                //调用接口
                this.$store.dispatch('auditRegister/auditRegisterOperate',{
                    token: this.accessState.token,
                    result: operation,
                    auditRegisterId: auditRegisterId
                }).then( () => {
                    //返回成功
                    this.$message.success("操作成功");
                    //console.log("通过操作成功");
                    this.selectedRowKeys=this.selectedRowKeys.filter((items)=>items!==auditRegisterId);
                    this.onChangePage(this.pagination.current,this.pagination.pageSize);
                }).catch((err) => {
                    this.$message.error(err.msg)
                })
            },
            //分页发生改变时，调用该事件
            onChangePage(page,pageSize){
                //修改分页数据
                this.pagination.current=page;
                this.pagination.pageSize=pageSize;
                //调用接口
                this.$store.dispatch('auditRegister/auditRegisterGet',{
                    token: this.accessState.token,
                    collegeId: this.accessState.collegeId,
                    rows: pageSize,
                    currentPage: page
                }).then(() => {
                        //返回成功
                        this.dataResource=this.auditRegisterState.auditRegisterInfo;
                        this.pagination.total=this.auditRegisterState.total;
                }).catch((err) => {
                    this.$message.error(err.msg)
                })
            },
            //批量操作时调用该事件
            onBatchOperation(operation){
                //调用接口
                this.$store.dispatch('auditRegister/auditRegisterBatchOperate',{
                    token: this.accessState.token,
                    result: operation,
                    auditRegisterId: this.selectedRowKeys
                }).then( () => {
                    //返回成功
                    this.$message.success("批量操作成功");
                    //console.log("通过操作成功");
                    this.selectedRowKeys=[];
                    this.onChangePage(this.pagination.current,this.pagination.pageSize);
                }).catch((err) => {
                    this.$message.error(err.msg)
                    this.selectedRowKeys=[];
                })
            },

            //弹出的对话框的确定取消按钮点击时，调用该事件
            handleOk(){
                this.visible=false;
            },
            handleCancel(){
                this.visible=false;
            }
        }
    }
</script>

<style scoped>
    .query-container{
        display: flex;
        margin: 1em;
    }
    .seize{
        margin-left: 1em;
    }

</style>


